<template>
  <div class="app">
    <h1 class="title">Module Federation 主应用</h1>
    
    <!-- 远程组件区域 -->
    <div class="section">
      <h2 class="section-title">远程组件</h2>
      <div class="component-container">
        <Suspense>
          <template #default>
            <div class="remote-component">
              <RemoteCoolButton @click="handleRemoteClick" />
            </div>
          </template>
          <template #fallback>
            <div class="loading">正在努力加载远程按钮...</div>
          </template>
        </Suspense>
      </div>
    </div>

    <!-- 共享工具函数区域 -->
    <div class="section">
      <h2 class="section-title">共享工具函数</h2>
      <div class="shared-utils">
        <div class="util-item">
          <span class="label">格式化后的金额：</span>
          <span class="value">{{ money }}</span>
        </div>
        <div class="util-item">
          <span class="label">格式化后的日期：</span>
          <span class="value">{{ date }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';

// 异步加载远程组件
// 'packages_center' 对应 vite.config.js 中 remotes 的 key
// '/CoolButton' 对应 remote 应用 exposes 的 key
const RemoteCoolButton = defineAsyncComponent(() => import('packages_center/CoolButton'));

import { formatCurrency, formatDate } from 'packages_center/formatters';

const money = formatCurrency(123456.78);

const date = formatDate(new Date());

const handleRemoteClick = () => {
  alert('你点击了来自 `packages-center` 的按钮！');
}
</script>

<style scoped>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 600;
}

.section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #007bff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  color: #495057;
  margin: 0 0 15px 0;
  font-size: 20px;
  font-weight: 500;
}

.component-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.component-label {
  font-weight: 500;
  color: #6c757d;
  margin-bottom: 10px;
}

.remote-component {
  display: inline-block;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 2px dashed #28a745;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.loading {
  padding: 15px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  color: #856404;
  text-align: center;
  font-style: italic;
}

.shared-utils {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.util-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border-left: 3px solid #17a2b8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.label {
  font-weight: 500;
  color: #495057;
}

.value {
  font-weight: 600;
  color: #007bff;
  background: #e3f2fd;
  padding: 4px 8px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .app {
    padding: 15px;
  }
  
  .title {
    font-size: 24px;
  }
  
  .util-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>
